/**
 * Created by xstneton 2018/4/29.
 */
import React from 'react';
import { connect } from 'react-redux';
import { removeTabNav, changeTabNav } from '@/store/reducers/common/action'
import { Tabs, Icon } from 'antd';
const TabPane = Tabs.TabPane;

const mapStateToProps = (state, ownProps) => ({
	tabNavList: state.common.tabNavList,
	activeKey: state.common.activeKey,
})

const mapDispatchToProps = (dispatch, ownProps) => ({
	changeTabNav: key => dispatch(changeTabNav(key)),
	removeTabNav: key => dispatch(removeTabNav(key))
})

class TabNav extends React.Component {
	// constructor(props) {
	// 	super(props);
	// }

	onChange = (activeKey) => {
		this.props.changeTabNav(activeKey);
	}

	onEdit = (targetKey, action) => {
		this[action](targetKey);
	}

	remove = (targetKey) => {
		this.props.removeTabNav(targetKey);
	}
	render() {
		return (
			<div>
				<Tabs
					hideAdd
					onChange={this.onChange}
					activeKey={this.props.activeKey}
					type="editable-card"
					onEdit={this.onEdit}
					tabBarStyle={{margin: 0}}
				>
					{this.props.tabNavList.map(pane => <TabPane tab={<span><Icon type="bars" /> {pane.title}</span>} key={pane.key} closable={pane.closable}></TabPane>)}
				</Tabs>
			</div>
		);
	}
}

export default connect(
	mapStateToProps,
	mapDispatchToProps
)(TabNav)